<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>还行</title>
    <script src="../lib/jquery-3.5.1.js"></script>
    <style>
        span {
            color: red;
            display: none;
        }
    </style>
</head>

<body>
    <form action="#" method="get">
        <label>用户名：<input type="text" name="username" id=""> </label>
        <span id="usernameSpan">用户名仅支持中英文、数字和下划线且不能为数字</span>
        <div></div>
        <label>手机号<input type="text" name="phone" id=""></label>
        <span id="phoneSpan">手机号码格式不正确</span> 
        <div></div>
        <label>密码：<input type="password" name="password" id=""> </label>
        <span id="passwordSpan">密码格式不正确</span>
        <div>

        </div>
        <input type="button" value="提交">
    </form>

    
</body>
<script>
    $(function () {
        let arr = new Array('/^[\u4e00-\u9fa5]{0,}$/');
        const userRegExp = /^[\u4e00-\u9fa5a-zA-Z0-9_]{2,14}$/;
        const phoneRegExp = /^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/;
        const passwordRegExp = /^\w{5,17}$/;
        $(":input").blur(function(){
            
            let usernameVal = $("input[name='username']").val();
            let phoneVal = $("input[name='phone']").val();
            let passwordVal = $("input[name='password']").val();
            let usernameValReg = userRegExp.test(usernameVal);
            let phoneValReg = phoneRegExp.test(phoneVal);
            let passwordValReg = passwordRegExp.test(passwordVal);
            if(usernameValReg){
                // alert('用户名格式正确');
                $('#usernameSpan').hide();
            }else{
                $('#usernameSpan').show();
                // alert('用户名格式错误');
            }

            if(phoneValReg){
                $('#phoneSpan').hide();
                // alert('手机号码格式正确');
            }else{
                $('#phoneSpan').show();
                // alert('手机号码格式错误');
            }

            if(passwordValReg){
                $('#passwordSpan').hide();
                // alert('密码格式正确');
            }else{
                $('#passwordSpan').show();
                // alert('密码格式错误');
            }
        });
        $('input').focus(function(){
           $(this).parent().next().hide();
        })



    })


</script>
</html>